<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style>
    div {

        height: 30px;
    }
</style>

<body>
    <script>
        // 点名: 每次刷新网页运行, 在控制台 随机输出一位同学的名字["老赵", "老李", "小传", "小黑"]，如果输出了，则数组中删除这个名字
        // let arr = ['老赵', '老李', '小传', '小黑', '德玛西亚', '阅文', '暗裔剑魔']
        // let re = Math.floor(Math.random() * arr.length)
        // console.log(re);
        // document.write(`${arr[re]}`);
        // arr.splice(re, 1)
        // console.log(arr);

        //声明对象

        // 目的: 复习对象的声明

        // 要求:

        // 1. 声明一个变量per, 类型为对象类型
        // 2. 该对象的属性为性别, 年龄, 爱好(3个)
        // 3. 该对象的方法有 说话, 吃饭(2个)
        // 4. 在控制台分别调用该对象的属性和方法
        // let per = {
        //     gender: '男',
        //     age: 18,
        //     aihao: ['吃饭', '睡觉', '看美女'],
        //     str: function () {
        //         return '吃饭'

        //     },
        //     str1: function () {
        //         console.log('搞硕习');
        //     }
        // }
        // console.log(per.gender);
        // console.log(per.age);
        // console.log(per['aihao']);
        // console.log(per.str());
        // per.str1()


        // 调用对象的方法

        //     目的: 复习对象的使用

        //     要求:

        //     1. 对象声明完毕后, 调用对象中的吃饭的方法
        //     2. 提示: 对象中的方法本质是函数, 调用需要加()
        //     3. 方法也可以传递参数的
        // let per = {
        //     gender: '男',
        //     age: 18,
        //     aihao: ['吃饭', '睡觉', '看美女'],
        //     str: function (c, b) {
        //         document.write(`${c},${b}`)

        //     },
        //     str1: function () {
        //         console.log('搞硕习');
        //     }
        // }
        // per.str('我爱吃饭', '还爱搞学习')


        // 猜数字游戏，设定次数，最多猜8次
        // let sz = Math.floor(Math.random() * (6))
        // let strr = true
        // for (let i = 1; i <= 3; i++) {
        //     let str = +prompt('请输入0-20之间的数字')

        //     if (str > sz) {
        //         alert('你猜大了')
        //     } else if (str < sz) {
        //         alert('你猜小了')
        //     } else {
        //         strr = false
        //         alert('牛逼啊这也能猜到')
        //         break
        //     }
        // }
        // if (strr) {
        //     alert('你太笨了')
        // }
        //随机数 Math.floor(Math.random()*(6))



        //课堂随机生成颜色的案例
        // 需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。
        // ①：如果参数传递的是true或者无参数，则输出 一个随机十六进制的颜色
        // ②：如果参数传递的是false，则输出 一个随机rgb的颜色
        // ③：格式：
        //     function getRandomColor(flag) {
        //     }
        //     console.log(getRandomColor(true)) //#ffffff
        //     console.log(getRandomColor(false)) //rgb(255,255,255)
        //     分析：
        //     提示： 16进制颜色格式为: ‘#ffffff’ 其中f可以是任意 0 - f之间的字符
        //     提示: rgb颜色格式为: ‘rgb(255, 255, 255) ’ 其中255可以是任意0 - 255之间的数字

        // function ys(a = true) {
        //     let arr = []
        //     let arr1 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        //     let sty = '#'
        //     let sty1 = ''
        //     for (let i = 0; i < 6; i++) {
        //         let ii = Math.floor(Math.random() * arr1.length)
        //         sty1 += (arr1[ii])
        //     }
        //     console.log(sty1);
        //     for (let i = 1; i <= 3; i++) {
        //         let arr0 = Math.floor(Math.random() * 256)
        //         arr.push(arr0)

        //     }

        //     if (a) {
        //         document.write(`${sty}${sty1}`)
        //     } else {
        //         document.write(`rgn(${arr[0]},${arr[1]},${arr[2]})`)
        //     }
        // }
        // ys()



        // function sjs(n, m) {
        //     return Math.floor(Math.random() * (m - n + 1)) + n

        // }
        // let ii = sjs(1, 10)
        // let bl = true
        // for (let i = 1; i <= 3; i++) {
        //     let str = prompt('输入0-10的数字')
        //     if (str > ii) {
        //         alert('你猜大了')
        //     } else if (str < ii) {
        //         alert('你猜小了')
        //     } else {
        //         alert('你猜对了')
        //         bl = false
        //         break
        //     }
        //     alert(`你的次数还剩${3 - i}`)
        // }
        // if (bl) {
        //     alert('三次机会用完')
        // }

        //封装一个函数 调用函数时 传的是true 不传 就显示16进制颜色
        function str(flex = true) {
            if (flex) {
                let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
                let str = '#'
                //通过循环找出arr 数组里面的随机数
                for (let i = 1; i <= 6; i++) {
                    let ii = Math.floor(Math.random() * arr.length)
                    //ii 就是arr的随机数
                    //用str 字符串拼接的方式加=
                    str += arr[ii]
                    console.log(str);

                }
                return str
            } else {
                //生成三个随机数 0-255
                let o = Math.floor(Math.random() * 256)
                let j = Math.floor(Math.random() * 256)
                let b = Math.floor(Math.random() * 256)
                return `rgb(${o},${j},${b})`
            }
        }
        let arrr = str(true)
        let arrr2 = str(false)
        document.write(`
        <div style = background-color:${arrr}>${arrr}</div>
        <div style = background-color:${arrr2}>${arrr2}</div>
        <div style = background-color:${arrr}>${arrr}</div>
        <div style = background-color:${arrr2}>${arrr2}</div>
        <div style = background-color:${arrr}>${arrr}</div>
        <div style = background-color:${arrr2}>${arrr2}</div>
        <div style = background-color:${arrr}>${arrr}</div>
        <div style = background-color:${arrr2}>${arrr2}</div>
        <div style = background-color:${arrr}>${arrr}</div>
        <div style = background-color:${arrr2}>${arrr2}</div>
        <div style = background-color:${arrr}>${arrr}</div>
        <div style = background-color:${arrr2}>${arrr2}</div>
        <div style = background-color:${arrr}>${arrr}</div>
        <div style = background-color:${arrr2}>${arrr2}</div>
        <div style = background-color:${arrr}>${arrr}</div>
        <div style = background-color:${arrr2}>${arrr2}</div>
        <div style = background-color:${arrr}>${arrr}</div>
        <div style = background-color:${arrr2}>${arrr2}</div>
        <div style = background-color:${arrr}>${arrr}</div>
        <div style = background-color:${arrr2}>${arrr2}</div>
        <div style = background-color:${arrr}>${arrr}</div>
        <div style = background-color:${arrr2}>${arrr2}</div>
        <div style = background-color:${arrr}>${arrr}</div>
        <div style = background-color:${arrr2}>${arrr2}</div>
        `)


    </script>
</body>

</html>